<template>
  <div class="linethree">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>空气湿度</span>
      </div>
      <div ref="chart1" class="chart">放图表信息</div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>光照</span>
      </div>
      <div ref="chart2" class="chart">放图表信息</div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>气压</span>
      </div>
      <div ref="chart3" class="chart">放图表信息</div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>土壤湿度</span>
      </div>
      <div ref="chart4" class="chart">放图表信息</div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "TuBiao",
};
</script>

<style lang="scss" scoped>
.linethree {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .box-card {
    width: 100%;
    margin-bottom: 10px;
    .chart {
      width: 100%;
      height: 400px;
      border: 1px solid red;
    }
  }
}
</style>